<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>精美相册，JS代码站整理收集。</title>
<link type="text/css" rel="stylesheet" href="galleryview.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#photos').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 100,
			frame_height: 100
		});
	});
</script>
</head>

<body>
您的位置：<a href="http://www.sitejs.com">JS代码站</a> > <a href="http://www.sitejs.com">网页特效</a> > <a href="http://www.sitejs.com/c/guanggao_1.shtml">广告代码</a><hr />
<h1>Photo Gallery - Light Theme</h1>
<p>This example shows how GalleryView can be used to display a photo gallery with slideshow functionality.  Clicking on a frame will jump to that photo, and the overlay caption for each photo contains links to the full image.</p>
<p>This gallery utilizes all default plugin options, setting only the dimensions of the panel and filmstrip frame.</p>
<div id="photos" class="galleryview">
  <div class="panel">
     <img src="img/01.jpg" /> 
    <div class="panel-overlay">
      <h2>Effet du soleil sur le paysage</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>.  View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/02.jpg" /> 
    <div class="panel-overlay">
      <h2>Eden</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.  View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/03.jpg" /> 
    <div class="panel-overlay">
      <h2>Snail on the Corn</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>.  View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/04.jpg" /> 
    <div class="panel-overlay">
      <h2>Flowers</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>.  View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/06.jpg" /> 
    <div class="panel-overlay">
      <h2>Alone Beach 2B</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>.  View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/05.jpg" /> 
    <div class="panel-overlay">
      <h2>Sunrise Trees</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>.  View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/07.jpg" /> 
    <div class="panel-overlay">
      <h2>Waterfall</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>.  View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/08.jpg" /> 
    <div class="panel-overlay">
      <h2>Death Valley</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>.  View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>
    </div>
  </div>
  <ul class="filmstrip">
    <li><img src="img/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
    <li><img src="img/frame-02.jpg" alt="Eden" title="Eden" /></li>
    <li><img src="img/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
    <li><img src="img/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
    <li><img src="img/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
    <li><img src="img/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
    <li><img src="img/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
    <li><img src="img/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
  </ul>
</div>
<h3>Function Call and Options</h3>
<pre>$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100
});</pre>
<p align="center"><script src='/plus/ad_js.php?aid=23' language='javascript'></script>
<script src='/plus/ad_js.php?aid=22' language='javascript'></script>
<script src='/plus/ad_js.php?aid=22' language='javascript'></script>
<script src='/plus/ad_js.php?aid=22' language='javascript'></script></p>
</body>
</html>
